<link rel="stylesheet" href="../static/css/style.css">
<link rel="stylesheet" href="../static/css/styleoneadd.css">
<link rel="stylesheet" href="../static/plugins/layui/css/layui.css">
<link rel="stylesheet" href="../static/plugins/bootstrap-3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../static/plugins/bootstrap-3.3.7/css/bootstrap.min.css">

<style>
    body{
        background-color: #f2f2f2 !important;
    }

</style>

    <!-- 内容主体区域 -->
<div class="layui-fluid-pad" ng-app="modifyQuestion" ng-controller="modify_question">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">问题编辑</div>
            <div class="layui-card-body">
                <div class="layui-row layui-pad15">
                    <form class="layui-form" action="" lay-filter="test1">

                        <div class="layui-col-md12 layui-col-lh">
                            <div class="layui-row">
                                <div class="layui-col-md1">问题名称：</div>
                                <div class="layui-col-md3">
                                    <input type="text" ng-model="questionName" name="title" id="questionContent"  placeholder="如：您的性别" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md12 layui-col-lh">
                            <div class="layui-row">
                                <div class="layui-col-md1">问题类型：</div>
                                <div class="layui-col-md3">
                                    <select name="city" ng-model="classType" class="form-control" lay-ignore id="questionType">
                                        <option value="">请选择</option>
                                        <option value="{{x.typeName}}" ng-repeat="x in classTypeList">{{x.typeName}}</option>
                                       <!-- <option value="0">北京</option>
                                        <option value="1">上海</option>
                                        <option value="2">广州</option>
                                        <option value="3">深圳</option>
                                        <option value="4">杭州</option>-->
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md12 layui-col-lh">
                            <div class="layui-row">
                                <div class="layui-col-md1">选项类型：</div>
                                <div class="layui-col-md3">
                                    <input type="radio" name="answerType" value="1" title="单选" checked="" >
                                    <input type="radio" name="answerType" value="2" title="多选" >
                                </div>
                            </div>
                        </div>
                        <div class="layui-addStyle">
                            <!--添加选项-->
                        </div>

                        <div class="layui-col-md12 layui-col-lh">
                            <a href="#" class="layui-btn layui-t-h" id="addAnswer">增加选项</a>
                        </div>
                        <div class="layui-col-md12 layui-text-center">
                            <a href="#" class="layui-btn layui-btn-w layui-t-h" ng-click="saveQuestion()">保存</a>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>

<script src="../static/js/jquery.min.js"></script>
<script src="../static/plugins/layui/layui.js"></script>
<script src="../static/plugins/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../static/js/angular.js"></script>
<script src="../static/js/app/consts/consts.js"></script>
<script>

    var num = 0;
    var currentQuestionId = "";

    var getQuestionURL = baseUrl + "/exam/getQuestion";
    var getAllClassTypeURL = baseUrl +"/exam/getAllClassType";
    var compileQuestionURL = baseUrl + "/exam/compileQuestion";

    var app = angular.module("modifyQuestion", ['ng']);
    app.controller("modify_question", function ($scope, $http) {

        $(function () {
            var url = location.search;
            console.log(url);
            var questionId = "";
            if(url.indexOf("?") != -1) {
                var str = url.substr(1);
                questionId = str.split("=")[1];
            }
            currentQuestionId = questionId;
            console.log(questionId);
            $http({
                method:"GET",
                url:getQuestionURL,
                params:{
                    token:"99999",
                    questionsId:questionId
                }
            }).then(function successCallback(result) {
                console.log(result.data.data);
                var question = result.data.data;
                $scope.questionName = question.content;
                var optionType = question.optionType;
                $scope.classType = question.classType;


                if(optionType === 1){
                   $("input[name='answerType']:eq(0)").attr("checked",'checked');
                   $("input[name='answerType']:eq(1)").removeAttr("checked");
               }else if(optionType  == 2){
                   $("input[name='answerType']:eq(0)").removeAttr("checked");
                   $("input[name='answerType']:eq(1)").attr("checked",'checked');
               }

                var answers = question.answers;
                for(var i = 0; i < answers.length; i++) {
                    num++;
                    answerData(answers[i]);
                }

                test();
            });
            $http({
                method: 'GET',
                params:{"token":"11111"},
                url: getAllClassTypeURL
            }).then(function successCallback(result){
                $scope.classTypeList = result.data.data;
                console.log($scope.classTypeList);
                shuaxin();
            });
        })


        function test() {
            layui.use('form', function(){
                var form = layui.form;
                form.render();
                //各种基于事件的操作，下面会有进一步介绍
            });
        }

        //增加选项点击事件
        $("#addAnswer").click(function() {
            num++;
            add11();
        });

        $scope.saveQuestion = function () {
            var answers = getFormData();
//            console.log(JSON.stringify(answers));
            var data = JSON.stringify({
                token:"123456",
                questionsId:currentQuestionId,
                content:$("#questionContent").val(),
                classType:$("#questionType").val(),
                optionType:$("input[name='answerType']:checked").val(),
                answers:answers
            });
            console.log(data);

            $http.post(compileQuestionURL,data).
                then(function successCallback(result) {
                console.log(result.data.data);
                msg(result.data.message);
                window.location.href = "questionManage.html";
            },function errorCallback(result) {
                msg("添加失败！");
            });

        }
        
    });

    function answerData(answer) {
        var html = '';
        html += '<div class="layui-col-md12 layui-col-lh">';
        html += '<div class="layui-row">';
        html += '<div class="layui-col-md1">' + '选项值：' + '</div>';
        html += '<div class="layui-col-md1">';
        html += '<input type="text" value="' + answer.content +'" name="title" id="answerContent' + num + '" class="form-control">';
        html += '</div>';
        html += '<div class="layui-col-md3 layui-left-pad15">';
        html += '<a href="#" class="layui-btn layui-t-h" onclick="test1()">关联平台单项</a>';
        html += '<a href="#" class="layui-btn layui-t-h" onclick="delDx(this)">删除</a>';
        html += '<input type="hidden" value="' + answer.id + '" id="localUniterm' + num + '"/>';
        html += '</div></div></div>';
        $('.layui-addStyle').append(html);
    }

    //获取所有答案
    function getFormData() {
        var answers = [];

        $(".layui-addStyle input[type=text]").each(function () {
            console.log($(this).val() + "******");
        });
        $(".layui-addStyle input[type=hidden]").each(function () {
            console.log($(this).val() + "******");
        });

        for(var i = 1; i <= num; i++){
            var answer = {};
            answer.content = $("#answerContent" + i).val();
            answer.localUnitermIds = $("#localUniterm" + i).val();
            answers.push(answer);
        }
        return answers;
    }

    function add11() {
        var html = '';
        html += '<div class="layui-col-md12 layui-col-lh">';
        html += '<div class="layui-row">';
        html += '<div class="layui-col-md1">' + '选项值：' + '</div>';
        html += '<div class="layui-col-md1">';
        html += '<input type="text" name="title" id="answerContent' + num + '" class="form-control">';
        html += '</div>';
        html += '<div class="layui-col-md3 layui-left-pad15">';
        html += '<a href="#" class="layui-btn layui-t-h" onclick="test1()">关联平台单项</a>';
        html += '<a href="#" class="layui-btn layui-t-h" onclick="delDx(this)">删除</a>';
        html += '<input type="hidden" id="localUniterm' + num + '"/>';
        html += '</div></div></div>';
        console.log(num);
        $('.layui-addStyle').append(html);

    }
    
    function delDx(e) {
        var  thischild = e.parentNode.parentNode.parentNode.parentNode;
        thischild.removeChild(e.parentNode.parentNode.parentNode);
    }

    function msg(msg) {
        layui.use(['form','layer'], function () {
            var layer = layui.layer;
            layer.msg(msg);
        });
    }

    function shuaxin() {
        layui.use(['form','layer'], function () {
            var form = layui.form;
            form.render('select',"test1");
        });
    }

    function test1() {
        layui.use(['form','layer'], function () {
            var form = layui.form;
            var strU = 'relationUniterm.html?num='+num;
            layer.open({
                type: 2,
                title:'单项库关联',
                area: ['850px', '500px'],
                shadeClose: true, //开启遮罩关闭
                content: strU
            });
        });
    }

    //Demo
    layui.use(['form','layer'], function(){
        var form = layui.form;


        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
        $(function () {
            form.render('select', 'test1');
        });

        //单项关联
        /*$(function () {
            $('.addXuan').on('click',function () {
                var strU = 'relationUniterm.html';
                layer.open({
                    type: 2,
                    title:'单项库关联',
                    area: ['850px', '650px'],
                    shadeClose: true, //开启遮罩关闭
                    content: strU,
                    yes: function(index, layero){
                        //按钮【按钮一】的回调
                        alert(layero);
                    }
                });
            });
            form.render('select', 'test1');
        });*/



    });
</script>


